<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>服务器硬件配置信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                <blockquote class="layui-elem-quote">CPU</blockquote>
                <table class="layui-table" lay-skin="row" id="cpu">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>核心数</td>
                        <td id="cpuNum">0个</td>
                    </tr>
                    <tr>
                        <td>用户使用率</td>
                        <td id="used">0%</td>
                    </tr>
                    <tr>
                        <td>系统使用率</td>
                        <td id="sys">0%</td>
                    </tr>
                    <tr>
                        <td>当前空闲率</td>
                        <td id="free">0%</td>
                        <!--<td th:text="${server.cpu.free + '%'}">0%</td>-->
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-xs-offset2 layui-col-sm-offset2 layui-col-md-offset2">
                <!--移动：6/12 | 平板：6/12 | 桌面：6/12-->
                <blockquote class="layui-elem-quote">内存</blockquote>
                <table class="layui-table" lay-skin="row" id="memory">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>内存</th>
                        <th>JVM</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>总内存</td>
                        <td id="memTotal">0 GB</td>
                        <td id="jvmTotal">0 MB</td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td id="memUsed">0 GB</td>
                        <td id="jvmUsed">0 MB</td>
                    </tr>
                    <tr>
                        <td>剩余内存</td>
                        <td id="menFree">0 GB</td>
                        <td id="jvmFree">0 MB</td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td id="menUsage">0 %</td>
                        <td id="jvmUsage">0 %</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <blockquote class="layui-elem-quote">服务器信息</blockquote>
                <table class="layui-table" lay-skin="row" id="severInfo">
                    <tbody>
                    <tr>
                        <td>服务器名称</td>
                        <td id="computerName">zeng-ecology</td>
                        <td>操作系统</td>
                        <td id="osName">Linux</td>
                    </tr>
                    <tr>
                        <td>服务器IP</td>
                        <td id="computerIp">127.0.0.1</td>
                        <td>系统架构</td>
                        <td id="osArch">amd64</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <blockquote class="layui-elem-quote">Java虚拟机信息</blockquote>
                <table class="layui-table" lay-skin="row" id="java">
                    <tbody>
                    <tr>
                        <td>Java名称</td>
                        <td id="jvmName">Java</td>
                        <td>Java版本</td>
                        <td id="jvmVersion">1.8.0</td>
                    </tr>
                    <tr>
                        <td>启动时间</td>
                        <td id="jvmStartTime">2018-12-31 00:00:00</td>
                        <td>运行时长</td>
                        <td id="jvmRunTime">0天0时0分0秒</td>
                    </tr>
                    <tr>
                        <td colspan="1">安装路径</td>
                        <td colspan="3" id="jvmHome"></td>
                    </tr>
                    <tr>
                        <td colspan="1">项目路径</td>
                        <td colspan="3" id="sysUserDir"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <blockquote class="layui-elem-quote">磁盘状态</blockquote>
                <table class="layui-table" lay-skin="row" id="file">
                    <thead>
                    <tr>
                        <th>盘符路径</th>
                        <th>文件系统</th>
                        <th>盘符类型</th>
                        <th>总大小</th>
                        <th>可用大小</th>
                        <th>已用大小</th>
                        <th>已用百分比</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/script/tgfApi.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
    layui.use(['element', 'jquery', 'table', 'form', 'api', 'okMock'], function () {
        let $ = layui.jquery, okMock = layui.okMock, api = layui.api;
        okLoading.close();
        
        function setCpu(cpu) {
            $('#cpuNum').text(cpu.cpuNum + ' 个');
            $('#used').text(cpu.used + ' %');
            $('#sys').text(cpu.sys + ' %');
            $('#free').text(cpu.free + ' %');
        }
        
        function setMemory(mem, jvm) {
            $('#memTotal').text(mem.total + ' Gb');
            $('#jvmTotal').text(jvm.total + ' Mb');

            $('#memUsed').text(mem.used + ' Gb');
            $('#jvmUsed').text(jvm.used + ' Mb');

            $('#menFree').text(mem.free + ' Gb');
            $('#jvmFree').text(jvm.free + ' Mb');

            //$('#menUsage').text(mem.usage + ' %');
            //$('#jvmUsage').text(jvm.usage + ' %');
            if(mem.usage > 80) {
                $('#menUsage').html('<span style="color: #e9322d">'+ mem.usage +' %</span>');
            } else {
                $('#menUsage').text(mem.usage +' %');
            }
            if(mem.usage > 80) {
                $('#jvmUsage').html('<span style="color: #e9322d">'+ jvm.usage +' %</span>');
            } else {
                $('#jvmUsage').text(jvm.usage +' %');
            }
        }
        
        function setServerInfo(sys) {
            $('#computerName').text(sys.computerName);
            $('#osName').text(sys.osName);
            $('#computerIp').text(sys.computerIp);
            $('#osArch').text(sys.osArch);
        }
        
        function setJavaInfo(jvm, sys) {
            $('#jvmName').text(jvm.name);
            $('#jvmVersion').text(jvm.version);
            $('#jvmStartTime').text(jvm.startTime);
            $('#jvmRunTime').text(jvm.runTime);
            $('#jvmHome').text(jvm.home);
            $('#sysUserDir').text(sys.userDir);
        }
        
        function setFileSystem(sysFiles) {
            var html = '';
            $.each(sysFiles,function (idx, obj) {
                html += fileObj(obj);
            })
            $('#file tbody').empty().html(html);
        }
        
        function fileObj(f) {
            var h =
                '<tr>' +
                '<td>'+ f.dirName +'</td>' +
                '<td>'+ f.sysTypeName +'</td>' +
                '<td>'+ f.typeName +'</td>' +
                '<td>'+ f.total +' Gb</td>' +
                '<td>'+ f.free +' Gb</td>' +
                '<td>'+ f.used +' Gb</td>' +
                '<td>'+ (f.usage > 80 ? '<span style="color: #e9322d">'+ f.usage +'</span>' : f.usage) +' %</td>' +
                '</tr>';
            return h;
        }

        $(function () {
            api.request({
                url: okMock.api.server.getServerInfo,
            }, function (res, status) {
                var sInfo = res.data;
                //CPU
                setCpu(sInfo.cpu);
                //内存
                setMemory(sInfo.mem, sInfo.jvm);
                //服务器信息
                setServerInfo(sInfo.sys);
                //Java信息
                setJavaInfo(sInfo.jvm, sInfo.sys);
                //磁盘信息
                setFileSystem(sInfo.sysFiles);
            });
        })
    })
</script>
</body>
</html>